<!-- 基础：4、计算属性 基础例子 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：4、计算属性 基础例子</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="example">
		<!-- 第一个p标签的数据模板很简单，将实例的数据message渲染编译 -->
		<p>Original message: "{{ message }}"</p>
		<!-- 如果要显示这个字符串倒序的效果呢？很自然想起模板的例子，可以做字符串运算嘛 -->
		<p>{{ message.split('').reverse().join('') }}</p>
		<!-- 还有用过滤器也能实现 -->
		<p>{{ message | reverseMessage }}</p>
		<!-- 在介绍计算属性之前，先对《模板语法》和《过滤器》两种方法进行点评
			对模板语法，只适用于简单的数字和字符串运算，加入逻辑再复杂一点，会让模板看起来很混乱，维护成本也比较高
			对过滤器，使用形式相对更加简洁，但每次只能对一个实例数据做操作，假如要求对多个数据做处理，可以通过传参
					  的方式（参考demo11.html）但看上去也不是很简洁

		    所以有了下面计算属性的特性，不用传参，使用更加灵活，使用形式更加简洁，所以遇到复杂的逻辑，应当想起计算属性
		 -->

		<p>Computed reversed message: "{{ reverseMessage }}"</p>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#example',
			data: {
				message: 'Hello'
			},
			filters: {
				reverseMessage: function(value){
					if(!value) return ''
					return value.split('').reverse().join('')
				}
			},
			computed: {
				reverseMessage: function(){
					return this.message.split('').reverse().join('')
				}
			}
		})

		// console.log(vm.reverseMessage)
		// vm.message = 'huyihao'
		// console.log(vm.reverseMessage)
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->